doctype html
html
  head
    meta(charset='utf-8')
    title= title
    link(rel='stylesheet' href='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css')
    link(rel='stylesheet' href='/stylesheets/mycss.css')
    script(src='http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js')
    script(src='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js')
    script(src='/js/user_manage.js')
    script#table-template(type="text/x-handlebars-template").
      {{#each users}}
        <tr class="success">
          <td>{{id}}</td>
          <td>{{email}}</td>
          <td>{{name}}</td>
          <td>{{phone}}</td>
          <td>{{address}}</td>
          <td>{{site}}</td>
          <td>{{title}}</td>
          <td>{{state}}</td>
          <td>{{type}}</td>
          <td>{{created_at}}</td>
          <td>{{updated_at}}</td>
          <td><button class="btn btn-info btn-xs btn-block btn-upd" type="button" data-toggle="modal" data-target="#update" data-result='{"id":{{id}},"email":"{{email}}","name":"{{name}}","phone":"{{phone}}","address":"{{address}}","site":"{{site}}","title":"{{title}}","state":"{{state}}","type":"{{type}}"}'>修改基本信息</button></td>
          <td><button class="btn btn-primary btn-xs btn-block btn-upd-password" type="button" data-toggle="modal" data-target="#update_password" data-id={{id}}>修改密码</button></td>
          <td><button class="btn btn-danger btn-xs btn-block btn-del" type="button" data-toggle="modal" data-target="#delete" data-id={{id}}>删除</button></td>
        </tr>
      {{/each}}
  body
    div.container
      //提示栏
      div.row.hidden
        div#banner-danger.alert.alert-danger.alert-dismissable 
          span 将返回信息显示在这里
          button.close(type="type" data-dismiss="alert" aria-hidden="true") &times;
      div.row.hidden
        div#banner-search.alert.alert-info.alert-dismissable 
          span 搜索结果如下：
          a(href="/user_manage" style="float:right") 返回搜索前的原始结果
      //标题和搜索框
      div.row
        ul.list-inline
          li.col-lg-3.nonpadding
            p.content-title=title
          li.col-lg-6.nonpadding
          li.float-right.col-lg-3.nonpadding
            div.input-group
              span.input-group-btn
                button.btn.btn-warning(type='button',data-toggle="modal",data-target="#add") 添加新用户
              input#searchBox.form-control(type='text',placeholder='输入关键字，支持模糊查询',required)
              span.input-group-btn
                button.btn.btn-warning.btn-search(type='button') 搜索
      //表格     
      div.row
        table.table
          thead
            tr
              th 序号
              th 邮箱
              th 姓名
              th 手机号
              th 单位地址
              th 工作单位
              th 职务
              th 状态
              th 类别
              th 创建日期
              th 修改日期
              th 修改基本信息
              th 修改密码
              th 删除
          tbody
            each result in results.results
              tr
              each val in result
                td.success #{val}
              td.success 
                - var info = result
                button(type='button' class='btn btn-info btn-xs btn-block btn-upd' data-result=info data-toggle="modal",data-target="#update") 修改基本信息
              td.success 
                - var id = result.id
                button(type='button' class='btn btn-primary btn-xs btn-block btn-upd-password' data-id=id data-toggle="modal",data-target="#update_password") 修改密码
              td.success 
                - var id = result.id
                button(type='button' class='btn btn-danger btn-xs btn-block btn-del' data-id=id data-toggle="modal",data-target="#delete") 删除
      //分页
      div.row(style="text-align:center;")
        ul.pagination#pagination(style="margin:0 auto;")
          li.page(page="first")
            a &laquo;
          - for (var i = 1; i < results.page_num+1; i++)
            li.page(page=i): a #{i}
          li.page(page="last" page_max=results.page_num)
            a &raquo;
      //显示返回信息的模态框
      div.modal.fade#infoReturn(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 返回信息
            div.modal-body#infoBody 返回的提示信息
            div.modal-footer
              button.btn.btn-primary#btn-confirm(type='submit') 确认
      //重置用户密码的模态框
      div.modal.fade#update_password(tabindex='-1',role='dialog',aria-labelledby='updpassLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 重置密码
            div.modal-body
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 密码
                  div.col-sm-7
                    input.form-control#password_upd(type='password',placeholder='请输入密码(必填)',value='',required)
                  div.col-sm-3
                    p#warning7(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 确认密码
                  div.col-sm-7
                    input.form-control#password_confirm_upd(type='password',placeholder='请再次输入密码(必填)',value='',required)
                  div.col-sm-3
                    p#warning8(style='color:#ff0000')
            div#upd_pass_id(style="display:none") 存储待重置的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-update-password(type='submit') 确认重置
            span#tips3
      //修改用户基本信息的模态框
      div.modal.fade#update(tabindex='-1',role='dialog',aria-labelledby='updLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 修改用户基本信息
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 邮箱
                  div.col-sm-7
                    input.form-control#email_upd(type='text',placeholder='请输入用户名/邮箱(必填)',value='',required)
                  div.col-sm-3
                    p#warning5(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 姓名
                  div.col-sm-7
                    input.form-control#name_upd(type='text',placeholder='请输入姓名(必填)',value='',required)
                  div.col-sm-3
                    p#warning6(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 手机号
                  div.col-sm-7
                    input.form-control#phone_upd(type='text' placeholder='请输入手机号码',value='') 
                div.form-group
                  label.col-sm-2.control-label 单位地址
                  div.col-sm-7
                    input.form-control#address_upd(type='text' placeholder='请输入单位地址',value='')
                div.form-group
                  label.col-sm-2.control-label 工作单位
                  div.col-sm-7
                    input.form-control#site_upd(type='text' placeholder='请输入工作单位',value='')
                div.form-group
                  label.col-sm-2.control-label 职务
                  div.col-sm-7
                    input.form-control#title_upd(type='text' placeholder='请输入职务',value='')
                div.form-group
                  label.col-sm-2.control-label 状态
                  div.col-sm-7
                    select.form-control#state_upd
                      option(value='VERIFIED') VERIFIED
                      option(value='PENDING') PENDING
                      option(value='DENY') DENY
                div.form-group
                  label.col-sm-2.control-label 类别
                  div.col-sm-7
                    select.form-control#type_upd
                      option(value='EXTERNAL' selected) EXTERNAL
                      option(value='INTERNAL') INTERNAL
            div#id_upd(style="display:none") 存储待修改项的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-info.btn-update(type='submit') 确认修改
            span#tips2
      //删除用户的模态框
      div.modal.fade#delete(tabindex='-1',role='dialog',aria-labelledby='delLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 删除用户
            div.modal-body#del_confirm 确认删除？
            div#del_id(style="display:none") 存储待删除的id
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-danger.btn-delete(type='submit') 确认删除
            span#tips1
      //添加用户的模态框
      div.modal.fade#add(tabindex='-1',role='dialog',aria-labelledby='addLabel',aria-hidden='true')
        div.modal-dialog
          div.modal-content
            div.modal-header
              button.close(type='button' data-dismiss='modal' aria-hidden='true') &times;
              h4 添加新用户
            div.modal-body 
              form.form-horizontal(role='form')
                div.form-group
                  label.col-sm-2.control-label 邮箱
                  div.col-sm-7
                    input.form-control#email(type='text',placeholder='请输入用户名/邮箱(必填)',value='',required)
                  div.col-sm-3
                    p#warning1(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 密码
                  div.col-sm-7
                    input.form-control#password(type='password',placeholder='请输入密码',value='',required)
                  div.col-sm-3
                    p#warning2(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 确认密码
                  div.col-sm-7
                    input.form-control#password_confirm(type='password',placeholder='请再次输入密码',value='',required)
                  div.col-sm-3
                    p#warning3(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 姓名
                  div.col-sm-7
                    input.form-control#name(type='text',placeholder='请输入姓名(必填)',value='',required)
                  div.col-sm-3
                    p#warning4(style='color:#ff0000')
                div.form-group
                  label.col-sm-2.control-label 手机号
                  div.col-sm-7
                    input.form-control#phone(type='text' placeholder='请输入手机号码',value='') 
                div.form-group
                  label.col-sm-2.control-label 单位地址
                  div.col-sm-7
                    input.form-control#address(type='text' placeholder='请输入单位地址',value='')
                div.form-group
                  label.col-sm-2.control-label 工作单位
                  div.col-sm-7
                    input.form-control#site(type='text' placeholder='请输入机构名称',value='')
                div.form-group
                  label.col-sm-2.control-label 职务
                  div.col-sm-7
                    input.form-control#title(type='text' placeholder='请输入职务',value='')
                div.form-group
                  label.col-sm-2.control-label 状态
                  div.col-sm-7
                    select.form-control#state
                      option(value='VERIFIED') VERIFIED
                      option(value='PENDING') PENDING
                      option(value='DENY') DENY
                div.form-group
                  label.col-sm-2.control-label 类别
                  div.col-sm-7
                    select.form-control#type
                      option(value='EXTERNAL' selected) EXTERNAL
                      option(value='INTERNAL') INTERNAL
            div.modal-footer
              button.btn.btn-default(type='button' data-dismiss='modal') 取消
              button.btn.btn-primary.btn-add(type='submit') 确认添加
            span#tips